<template>
  <div class="card-container">
    <a-tabs default-active-key="1">
      <a-tab-pane :key="item.key" :tab="item.title" v-for="item in tabsList">
        <div class="latelyApplication" v-if="item.key == 1">
          <Atlas />
          <a-tree :load-data="onLoadData" :tree-data="treeData" />
        </div>
        <div class="latelyApplication" v-else>12221</div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import Atlas from "./Atlas.vue";
export default {
  components: { Atlas },
  data() {
    return {
      tabsList: [
        {
          key: "1",
          title: "图谱详情",
        },
      ],
      treeData: [
        { title: "关联实体", key: "0" },
        { title: "相关图片", key: "1" },
        { title: "相关文档", key: "2" },
        { title: "相关音频", key: "3" },
      ],
    };
  },
  methods: {
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: "Child Node", key: `${treeNode.eventKey}-0` },
            { title: "Child Node", key: `${treeNode.eventKey}-1` },
          ];
          this.treeData = [...this.treeData];
          resolve();
        }, 1000);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card-container {
  margin: 0 10px;
}
::v-deep .ant-tabs-bar {
  border: none;
}

::v-deep .ant-tabs-nav {
  // margin-left: 20px;
  font-family: PingFang SC;
  font-size: 20px;
}
</style>
